<template>
	<public-view topBgShow="6" navType="vip" navColor="#fff" navTitle="会员中心">
		<view class="content">
			<view style="margin-top: 50px;padding:0 15px;height: 126px;">
				<view class="user-card" style="display: flex;align-items: center; gap:0 22px; justify-content: center;">
					<view >
						<view style="display: flex;align-items: center; gap:0 12px;">
							<image class="avatar" :src="userInfo?.avatar || '@/static/logo.png'" mode=""></image>
							<view> 
								<view> {{ userInfo?.nickname || '' }}</view>
								<view style="margin-top:10px; font-size:12px; color:#898165;"> {{  userVipInfo?.level?'已开通vip' + userVipInfo?.level : '未开通'}}</view>
							</view>
						</view>
						<view style="width:120px;margin-top:12px;font-size:12px;padding:8px ; background-color: rgba(255,255,255,0.3); border-radius: 10px; margin-top: 12px;color:#7A6D64;">
							剩余联系次数 0 次
						</view>
					</view>
					<image style="width:119px; height:100px;" src="@/static/images/vip/vip-icon.png" />
				</view>
			</view>
			<view style="padding:0 15px; margin-top:20px;">
				<view style="font-weight: 500;margin-bottom:15px;">VIP 会员</view>
				<view class="item-box">
					<view class="item"
						
						v-for="(item, index) in sets" :key="index"
						@click="changeSet = index"
						:class="changeSet === index ? 'item-a' : ''"
					>
						<view>
							<view class="num">{{ item.num }} 次数</view>
							<view style="margin-top:10px;font-size:12px;color:#97948F;">用于找车找货获取对方联系方式</view>
						</view>
						<view class="price"><span style="font-size:16px;">￥</span>{{ item.price }}</view>
						<view class="tips">VIP{{ item.level }}</view>
					</view>
				</view>
			</view>
			<view class="button-box">
				<view class="button">
					<view class="displayPrice"><span style="font-size:16px;">￥</span>{{ displayPrice }}</view>
					<view class="pay" @click="kt">立即开通</view>
				</view>
			</view>
		</view>
	</public-view>
</template>
<script>
	import {
		mapGetters
	} from "vuex"
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				userVipInfo: {},
				changeSet: 0,
				sets: [
					{
						level:1,
						num:30,
						price: 188
					},
					{
						level:2,
						num:30,
						price: 288
					}
				],
			}
		},
		onShow(){
			console.log(this.userInfo)
		},
		computed: {
			...mapGetters(["userInfo"]),
			displayPrice(){
				return this.sets[this.changeSet].price;
			}
		},
		methods: {
			goTo,
			kt(){
				console.log('点击开通')
			}
		}
	}
</script>
<style scoped>
.user-card {
	width:100%;
	height:100%;
	background-image:url('@/static/images/vip/user-card.png');
	background-size: cover; /* 背景图片覆盖整个元素 */
	background-position: center; /* 背景图片居中 */
	background-repeat: no-repeat; /* 背景图片不重复 */
	border-radius: 10px;
}
.avatar{
	width: 42px;
	height: 42px;
	border-radius: 50%;
}
.item-box {
	display: flex;
	flex-direction: column;
	gap: 14px 0;
}

.item {
	position: relative;
	border :1px solid #F4EDDF;
	display: flex;
	padding: 15px 20px;
	border-radius: 10px;
	justify-content: space-between;
}
.item .num{
	font-size: 18px;
	font-weight: 500;
	color: #0E0F11;
	
}
.item .price {
	font-size:28px;
	font-weight: 500;
	color:#0E0F11;
	line-height: 40px;
	display: flex;
	justify-items: center;
}
.item-a {
	border :1px solid #FCC349;
	background: #FCF9F2;
}

.item-a .num,.item-a .price {
	color: #5F4E32;
}
.tips{
	width: 42px;
	height: 19px;
	line-height: 19px;
	text-align: center;
	position: absolute;
	top:0px;
	left: calc(100% - 42px);
	background-image: url('@/static/images/vip/tips.png');
	font-size: 12px;
	font-weight: 500;
	color:#5F4E32;
}
.button-box{
	padding:0 15px;
	display: flex;
  justify-content: center;
}

.button {
	display: flex;
	bottom: 10px;
	width: 90%;
	height: 47px;
	position: fixed;
	border-radius: 23.5px;
	background:rgb(51,51,51);
	justify-content: space-between;
}
.button .displayPrice {
	margin-left:30px;
	color:#FCEDDC;
	font-size:28px;
	font-weight: 500;
	line-height: 47px;
	display: flex;
	justify-items: center;
}

.button .pay {
	position: relative;
	right: -1px;
	color:#0E0F11;
	line-height: 47px;
	font-weight: bold;
	text-align: center;
	width: 126px;
	height: 100%;
	background-image: url('@/static/images/vip/pay.png');
}
</style>